<!-- 📚📚📚 Pro-Table 文档: https://juejin.cn/post/7166068828202336263 -->

<template>
	<!-- 查询表单 card -->
	<SearchForm v-show="isShowSearch" :search="search" :reset="reset" :columns="searchColumns" :search-param="searchParam" :search-col="searchCol">
		<template #searchHeader>
			<slot name="searchHeader" />
		</template>
		<template #otherButton>
			<slot name="otherButton" :selected-list-ids="selectedListIds" :selected-list="selectedList" :is-selected="isSelected" />
		</template>
	</SearchForm>

	<!-- 表格内容 card -->
	<div class="card table-main">
		<!-- 表格头部 操作按钮 -->
		<div class="table-header">
			<slot name="tableHeader" />
			<div v-if="toolButton" class="header-button-ri">
				<slot name="toolButton">
					<el-button :icon="Refresh" circle @click="getTableList" />
					<el-button v-if="columns.length" :icon="Operation" circle @click="openColSetting" />
					<el-button v-if="searchColumns.length" :icon="Search" circle @click="isShowSearch = !isShowSearch" />
				</slot>
			</div>
		</div>
		<!-- 表格主体 -->
		<el-table
			ref="tableRef"
			v-bind="$attrs"
			:data="data ?? tableData"
			:border="border"
			:row-key="rowKey"
			show-overflow-tooltip
			@selection-change="selectionChange"
		>
			<!-- 默认插槽 -->
			<slot></slot>
			<template v-for="item in tableColumns" :key="item">
				<!-- selection || index || expand -->
				<el-table-column
					v-if="item.type && ['selection', 'index', 'expand'].includes(item.type)"
					v-bind="item"
					:align="item.align ?? 'center'"
					:reserve-selection="item.type == 'selection'"
				>
					<template v-if="item.type == 'expand'" #default="scope">
						<component :is="item.render" v-bind="scope" v-if="item.render"> </component>
						<slot v-else :name="item.type" v-bind="scope"></slot>
					</template>
				</el-table-column>
				<!-- other -->
				<TableColumn v-if="!item.type && item.prop && item.isShow" :column="item">
					<template v-for="slot in Object.keys($slots)" #[slot]="scope">
						<slot :name="slot" v-bind="scope"></slot>
					</template>
				</TableColumn>
			</template>
			<!-- 插入表格最后一行之后的插槽 -->
			<template #append>
				<slot name="append"> </slot>
			</template>
			<!-- 无数据 -->
			<template #empty>
				<div class="table-empty">
					<slot name="empty">
						<img :src="notData" alt="notData" />
						<div>暂无数据</div>
					</slot>
				</div>
			</template>
		</el-table>
		<!-- 分页组件 -->
		<slot name="pagination">
			<Pagination v-if="pagination" :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
		</slot>
	</div>
	<!-- 列设置 -->
	<ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
</template>

<script setup lang="ts" name="ProTable">
import { ref, watch, computed, provide, onMounted } from 'vue';
import { ElTable } from 'element-plus';
import { useTable } from '/@/hooks/useTable';
import { useSelection } from '/@/hooks/useSelection';
import { BreakPoint } from '/@/components/grid/interface';
import { ColumnProps } from './interface';
import { Refresh, Operation, Search } from '@element-plus/icons-vue';
import { handleProp } from '/@/utils/index';
import SearchForm from '/@/components/searchForm/index.vue';
import Pagination from './components/Pagination.vue';
import ColSetting from './components/ColSetting.vue';
import TableColumn from './components/TableColumn.vue';
import notData from '/@/assets/images/notData.png';

export interface ProTableProps {
	columns: ColumnProps[]; // 列配置项  ==> 必传
	data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
	requestApi?: (params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
	requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
	requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
	dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
	title?: string; // 表格标题，目前只在打印的时候用到 ==> 非必传
	pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
	initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
	border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
	toolButton?: boolean; // 是否显示表格功能按钮 ==> 非必传（默认为false）
	rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
	searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
}

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<ProTableProps>(), {
	columns: () => [],
	requestAuto: true,
	pagination: true,
	initParam: {},
	border: false,
	toolButton: false,
	rowKey: 'id',
	searchCol: () => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }),
});

// 是否显示搜索模块
const isShowSearch = ref(true);

// 表格 DOM 元素
const tableRef = ref<InstanceType<typeof ElTable>>();

// 表格多选 Hooks
const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);

// 表格操作 Hooks
const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } = useTable(
	props.requestApi,
	props.initParam,
	props.pagination,
	props.dataCallback,
	props.requestError
);

// 清空选中数据列表
const clearSelection = () => tableRef.value!.clearSelection();

const toggleRowSelection = (row: any, status: boolean) => tableRef.value!.toggleRowSelection(row, status);

// 初始化请求
onMounted(() => props.requestAuto && getTableList());

// 监听表格数据，重新渲染
watch(
	() => props.columns,
	() => {
		tableColumns.value = props.columns;
		init();
	},
	{ deep: true }
);

// 监听页面 initParam 改化，重新获取表格数据
watch(
	() => props.initParam,
	() => {
		searchParam.value = {
			...props.initParam,
			...searchParam.value,
		};
		// getTableList();
	},
	{ deep: true }
);

watch(
	() => JSON.parse(JSON.stringify(searchParam.value)),
	(oldV: any, newV: any) => {
		searchColumns.forEach(async (column: any) => {
			if (column.enumWatch && oldV[column.enumWatch] !== newV[column.enumWatch]) {
				setEnumMap(column);
				if (column.enumWatch !== column.prop) {
					delete searchParam.value[column.prop];
				}
			}
		});
	},
	{ deep: true }
);
// 接收 columns 并设置为响应式
const tableColumns = ref<ColumnProps[]>(props.columns);

// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
const enumMap = ref(new Map<string, { [key: string]: any }[]>());
provide('enumMap', enumMap);
const setEnumMap = async (col: ColumnProps) => {
	if (!col.enum) return;
	// 如果当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
	if (typeof col.enum !== 'function') return enumMap.value.set(col.prop!, col.enum!);
	const { data } = await col.enum();
	enumMap.value.set(col.prop!, data);
};

// 扁平化 columns
const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
	columns.forEach(async (col) => {
		if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children));
		flatArr.push(col);

		// 给每一项 column 添加 isShow && isFilterEnum 默认属性
		col.isShow = col.isShow ?? true;
		col.isFilterEnum = col.isFilterEnum ?? true;

		// 设置 enumMap
		setEnumMap(col);
	});
	return flatArr.filter((item) => !item._children?.length);
};

// flatColumns
const flatColumns = ref<ColumnProps[]>();

// 过滤需要搜索的配置项
let searchColumns;

// 列设置 ==> 过滤掉不需要设置的列
const colRef = ref();
let colSetting;
let openColSetting;

const init = () => {
	flatColumns.value = flatColumnsFunc(tableColumns.value);

	// 过滤需要搜索的配置项

	searchColumns = flatColumns.value.filter((item) => item.search?.el || item.search?.render);

	// 设置搜索表单排序默认值 && 设置搜索表单项的默认值
	searchColumns.forEach((column, index) => {
		column.search!.order = column.search!.order ?? index + 2;
		if (column.search?.defaultValue !== undefined && column.search?.defaultValue !== null) {
			searchInitParam.value[column.search.key ?? handleProp(column.prop!)] = column.search?.defaultValue;
			searchParam.value[column.search.key ?? handleProp(column.prop!)] = column.search?.defaultValue;
		}
	});

	// 排序搜索表单项
	searchColumns.sort((a, b) => a.search!.order! - b.search!.order!);

	// 列设置 ==> 过滤掉不需要设置的列
	colSetting = tableColumns.value!.filter(
		(item) => !['selection', 'index', 'expand'].includes(item.type!) && item.prop !== 'operation' && item.isShow
	);
	openColSetting = () => colRef.value.openColSetting();
};
init();

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	element: tableRef,
	tableData,
	pageable,
	searchParam,
	searchInitParam,
	getTableList,
	search,
	reset,
	handleSizeChange,
	handleCurrentChange,
	clearSelection,
	enumMap,
	isSelected,
	selectedList,
	selectedListIds,
	toggleRowSelection,
});
</script>
